<template>
	<div class="system-user-container layout-padding">
		11111111
	</div>
	<Basic>
    <div class="slot">
      This is the Vue default slot
      <Custom1/>
    </div>
  </Basic>
	<BasicPure>
    <div class="slot">
      This is the Vue3 default slot
      <Custom1/>
    </div>
  </BasicPure>
</template>

<!-- <script setup lang="ts" name="lowercodeEditor"> -->
<script>
import { onMounted } from 'vue';
// import {applyReactInVue, applyPureReactInVue} from 'veaury'
import {applyPureReactInVue} from 'veaury'
// 这是一个React组件
// import BasicReactComponent from './react_app/Basic.jsx'
// This is a React Component
import ReactBasic from "./react_app/Basic"

// 引入组件
export default {
  components: {
    // 使用高阶组件 'applyReactInVue'
    // Basic: applyReactInVue(BasicReactComponent),
    // 现在推荐使用纯净模式的 'applyPureReactInVue'
		Basic: applyPureReactInVue(ReactBasic),
		BasicPure: applyPureReactInVue(ReactBasic)
    // BasicPure: applyPureReactInVue(BasicReactComponent)
  },
  setup() {
    let timer
    const random = ref(Math.random())
    provide('random', random)
    onMounted(() => {
      timer = setInterval(() => {
        random.value = Math.random()
      }, 1000)
    })
    onUnmounted(() => {
      clearInterval(timer)
    })
    return {
      random
    }
  }
}

// 页面加载时
onMounted(() => {
	// getTableData();
});
</script>

<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
</style>
